<template>
  <div class="official-cont max-cont">
    <Row align="top" :gutter="10">
      <Col :span="4">
        <v-web-tab></v-web-tab>
      </Col>
      <Col :span="20">
        <Row class="ads-cont">
          <Col :span="18">
            <img alt="广告" src="@/assets/ad/ad-long.png"/>
          </Col>
          <Col :span="6">
            <img alt="广告" src="@/assets/ad/ad-short.jpg"/>
          </Col>
        </Row>
        <Row>
          <Col :span="18">
            <div class="off-cont">
              <div class="off-grid">
                <Row :gutter="10">
                  <Col :span="16">
                    <v-carousel></v-carousel>
                  </Col>
                  <Col :span="8">
                    <div class="carousel-rt">
                      <div class="rt-item">
                        <div class="img1"></div>
                      </div>
                      <div class="rt-item">
                        <div class="img2"></div>
                      </div>
                    </div>
                  </Col>
                </Row>
              </div>
              <v-off-item></v-off-item>
            </div>
          </Col>
          <Col :span="6">
            <v-off-aside></v-off-aside>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
  import vWebTab from '@/components/base/webTab'
  import vOffItem from '@/components/base/offItem'
  import vCarousel from '@/components/base/carousel'
  import vOffAside from '@/components/base/offAside'

  export default {
    name: 'official',
    components: {
      vWebTab,
      vOffItem,
      vCarousel,
      vOffAside
    },
    data() {
      return {}
    },
    methods: {},
    created() {

    }
  }
</script>

<style scoped lang="scss">
  .official-cont{
    padding: 13px 10px 30px;
    .ads-cont{
      overflow: hidden;
      height: 90px;
      background-color: #ffffff;
      .ivu-col{
        overflow: hidden;
        height: 100%;
        img{
          width: 100%;
          height:100% ;
        }
        &:last-child{
          img{
            margin-left: 8px;
          }
        }
      }
    }
    .off-cont{
      background-color: #ffffff;
      .off-grid{
        margin: 10px 0;
        .carousel-rt{
          height: 320px;
          display: flex;
          flex-direction: column;
          .rt-item{
            flex: 1;
            overflow: hidden;
            .img1{
              display: block;
              width: 100%;
              height: 100%;
              background: url("~@/assets/ad/rt1.jpg") no-repeat;
              background-size: 100% 100%;
              background-position: center;
              transition: all 0.5s;
              -moz-transition: all 0.5s;
              -webkit-transition: all 0.5s;
              &:hover{
                -webkit-transition: .5s transform;
                transition: .5s transform;
                -webkit-transform: scale(1.2);
                transform: scale(1.2);
              }
            }
            .img2{
              display: block;
              width: 100%;
              height: 100%;
              background: url("~@/assets/ad/rt1.jpg") no-repeat;
              background-size: 100% 100%;
              background-position: center;
              transition: all 0.5s;
              -moz-transition: all 0.5s;
              -webkit-transition: all 0.5s;
              &:hover{
                -webkit-transition: .5s transform;
                transition: .5s transform;
                -webkit-transform: scale(1.2);
                transform: scale(1.2);
              }
            }
            &:first-child{
              padding-bottom: 5px;
            }
            &:last-child{
              padding-top: 5px;
            }
          }
        }
      }
    }

  }
</style>
